<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汇智电商首页</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/styles.css">
    <style>
        .swiper {
            width: 100%;
            height: 200px;
        }

        .swiper img {
            width: 100%;
            height: 200px;
        }
    </style>
</head>

<body>
    <!-- 搜索 -->
    <div class="container">
        <h2 class="city">城市</h2>
        <input type="text" placeholder="请输入搜索内容">
        <h2 class="login">登录</h2>
    </div>

    <div class="g-wrapper">
        <!-- 轮播区域 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img
                        src="https://img.alicdn.com/imgextra/i3/2053469401/O1CN01g8ituT2JJiCsKjmDz_!!2053469401.png"
                        alt="">
                </div>
                <div class="swiper-slide"><img
                        src="https://img2.baidu.com/it/u=717979571,3244631707&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400"
                        alt="" /></div>
                <div class="swiper-slide"><img
                        src="https://img1.baidu.com/it/u=1733684228,4177721799&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
                        alt=""></div>
            </div>

        </div>

        <!-- 分类 -->
        <div class="category-wrapper">
            <div class="box">
                <img src="../img/11.jpg" alt="1">
                <p>美食</p>
            </div>
            <div class="box">
                <img src="../img/22.jpg" alt="1">
                <p>电脑</p>
            </div>

            <div class="box">
                <img src="../img/33.jpg" alt="1">
                <p>医疗</p>
            </div>

            <div class="box">
                <img src="../img/44.jpg" alt="1">
                <p>熊猫</p>
            </div>

            <div class="box">
                <img src="../img/11.jpg" alt="1">
                <p>美食</p>
            </div>

            <div class="box">
                <img src="../img/11.jpg" alt="1">
                <p>美食</p>
            </div>
            <div class="box">
                <img src="../img/22.jpg" alt="1">
                <p>电脑</p>
            </div>

            <div class="box">
                <img src="../img/33.jpg" alt="1">
                <p>熊猫</p>
            </div>

            <div class="box">
                <img src="../img/44.jpg" alt="1">
                <p>医疗</p>
            </div>

            <div class="box">
                <img src="../img/11.jpg" alt="1">
                <p>美食</p>
            </div>
        </div>


        <!-- 列表 -->
        <div class="g-list">
            <div class="goods">
                <img src="../img/22.jpg" alt="img">
                <div class="g-right">
                    <h2>西城公馆游泳馆</h2>
                    <p>一品天下成人游泳单人票</p>
                    <p class="m-price"><span>16元</span>门市价20元素</p>
                    <p class="m-sale">已售1163</p>
                </div>
            </div>


            <div class="goods">
                <img src="../img/11.jpg" alt="img">
                <div class="g-right">
                    <h2>西城公馆游泳馆</h2>
                    <p>一品天下成人游泳单人票</p>
                    <p class="m-price"><span>16元</span>门市价20元素</p>
                    <p class="m-sale">已售1163</p>
                </div>
            </div>

            <div class="goods">
                <img src="../img/33.jpg" alt="img">
                <div class="g-right">
                    <h2>西城公馆游泳馆</h2>
                    <p>一品天下成人游泳单人票</p>
                    <p class="m-price"><span>16元</span>门市价20元素</p>
                    <p class="m-sale">已售1163</p>
                </div>
            </div>

            <div class="goods">
                <img src="../img/11.jpg" alt="img">
                <div class="g-right">
                    <h2>西城公馆游泳馆</h2>
                    <p>一品天下成人游泳单人票</p>
                    <p class="m-price"><span>16元</span>门市价20元素</p>
                    <p class="m-sale">已售1163</p>
                </div>
            </div>

        </div>
    </div>
    
    <!-- 底部tabbar区域 -->
    <!-- html网页结构 -->
    <ul class="g-footer">
        <li class="active">首页</li>
        <li>分类</li>
        <li>购物车</li>
        <li>我的</li>
    </ul>

    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <script>
        new Swiper('.swiper', {
            loop: true, // 循环模式选项
            autoplay: {
                delay: 1500
            },
        })        
    </script>
</body>

</html>